<script setup name="DictTree">
import {dictGetList} from "@/api/sys/dict";
import DictTreeCurd from "@/views/sys/dict/treeCurd";
import {getCurrentInstance, reactive, onMounted, nextTick} from "vue";

const {proxy} = getCurrentInstance();
import {useRoute} from "vue-router";

const route = useRoute();

onMounted(() => {
  pd.queryParams.code = route.query.code;
  dictGetList({code:pd.queryParams.code}).then(res => {
    if ( res.data[0].parentId === 1 ){
      pd.queryParams.ancestors = res.data[0].id;
      pd.parentId = res.data[0].id;
      getList();
    }else {
      pd.queryParams.ancestors = -1;
      proxy.$modal.msgError("编码错误！！");
    }
  });
});

const pd = reactive({
  parentId: null,
  dictList: [],
  dictOptions: [],
  loading: true,
  refreshTable: true,
  isExpandAll: true,
  showSearch: true,
  daterangeUpdate_time: [],
  queryParams: {
    name: null,
    parentId: null,
    ancestors: null,
    enableFlag: "0"
  }
});

/** 查询合作伙伴列表 */
function getList() {
  pd.loading = true;
  if (null != pd.daterangeUpdate_time && '' != pd.daterangeUpdate_time) {
    pd.queryParams.beginTime = pd.daterangeUpdate_time[0];
    pd.queryParams.endTime = pd.daterangeUpdate_time[1];
  }
  if (pd.parentId > 1){
    dictGetList({ancestors:pd.queryParams.ancestors}).then(res => {
      if (res.data){
        pd.dictList = proxy.handleTree(res.data, 'id', 'parentId','children');
      }
      pd.loading = false;
    });
  }else {
    pd.loading = false;
  }
}

/** 展开/折叠操作 */
function toggleExpandAll() {
  pd.refreshTable = false;
  pd.isExpandAll = ! pd.isExpandAll;
  nextTick(() => {
    pd.refreshTable = true;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  pd.queryParams.beginTime = null;
  pd.queryParams.endTime = null;
  pd.queryParams.name = null;
  pd.daterangeUpdate_time = [];

  proxy.resetForm("queryRef");
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd(parentId) {
  let dict = {};
  dict.parentId = parentId;
  proxy.$refs["dictTreeCurdRef"].add(dict);
}

/** 修改按钮操作 */
function handleEdit(parentId) {
  proxy.$refs["dictTreeCurdRef"].edit(parentId);
}

/** 修改按钮操作 */
function handleDel(id) {
  proxy.$refs["dictTreeCurdRef"].del(id);
}

/** 对话框完成后刷新界面 */
function dictCurdOk(operation) {
  getList();
}

</script>

<template>
  <div class="app-container">
    <el-form :model="pd.queryParams" ref="queryRef" :inline="true" v-show="pd.showSearch" label-width="68px">

    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Search" @click="handleQuery">搜 索</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd(pd.parentId)"
                   v-hasPermi="['hrp:dict:add']">新增顶级</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="Upload" v-hasPermi="['sys:dict:add']">导 入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" v-hasPermi="['sys:dict:export']">导 出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="pd.showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-if="pd.refreshTable" v-loading="pd.loading" :data="pd.dictList" row-key="id" :default-expand-all="pd.isExpandAll"
              :dict-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="上级id" width="90" prop="parentId" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="祖籍" align="center" prop="ancestors" />
      <el-table-column label="名称" align="center" prop="name">
        <template #default="scope">
          <el-link type="primary" @click="handleEdit(scope.row)" v-hasPermi="['hrp:dict:edit']">
            {{ scope.row.name }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" prop="sort"/>
      <el-table-column label="启用" align="center" prop="enableFlag">
        <template #default="scope">
          <el-switch disabled active-value="0" inactive-value="1" :value="scope.row.enableFlag"/>
        </template>
      </el-table-column>
      <el-table-column label="参数" align="center" prop="params"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="创建人" align="center" prop="createBy"/>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新人" align="center" prop="updateBy"/>
      <el-table-column label="更新时间" align="center" prop="updateTime">
        <template #default="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)" v-hasPermi="['hrp:dict:edit']">
            修改
          </el-button>
          <el-button link type="primary" icon="Delete" @click="handleDel(scope.row.id)" v-hasPermi="['hrp:dict:del']">
            删除
          </el-button>
          <el-button link type="primary" icon="More" @click="handleAdd(scope.row.id)" v-hasPermi="['hrp:dict:edit']">
            新增下级
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <DictTreeCurd ref="dictTreeCurdRef" @ok="dictCurdOk"/>
  </div>
</template>

<style lang='scss' scoped>

</style>